<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Dancing in the snow</title>

    <!-- ! 主页logo -->
    <link rel="icon" href="img/favicon.png" type="image/x-icon" />

    <!-- ^ Bootstrap 3.4.1 -->
    <link href="css/bootstrap-3.4.1.min.css" rel="stylesheet">

    <!-- ^ animate 4.1.1 -->
    <link href="css/animate.css" rel="stylesheet">

    <!-- ^ pagination.css -->
    <link rel="stylesheet" href="css/pagination.css">

    <!-- ^ wow 1.1.2 -->
    <script src="js/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>

    <!-- ^ 图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

    <!-- # home-loading -->
    <link rel="stylesheet" href="css/style.css">

    <!-- # preview -->
    <link rel="stylesheet" href="css/preview.css">

    <!-- # css -->
    <link rel="stylesheet" href="">

</head>

<body>

    <div class="home-loading animate__animated animate__bounceOut"></div>

    <!-- ! Header area -->
    <header id="header">

        <div class="header-left">
            <div class="header-text">
                <p class="header-welcome">Welcome to the channel of</p>
                <h1 class="header-title wow animate__animated animate__lightSpeedInLeft" data-wow-delay="1s">DS</h1>
                <h1 class="wow animate__animated animate__lightSpeedInLeft" data-wow-delay="1s"><small>Dancing in the
                        snow.</small></h1>
                <p class="header-author wow animate__animated animate__flipInX" data-wow-delay="1.5s">by <a href=""
                        title="lllllan: Tongbo Su">lllllan</a></p>
            </div>
        </div>
        <!--  /.header-left  -->

        <div class="header-right"></div>
        <!--  /.header-right  -->

    </header>
    <!-- ! /header  -->

    <!-- <div class="bg"></div> -->

    <!-- ! navigation -->
    <section id="navigation">
        <div class="container">
            <div class="row">
                <div class="col-xs-2 text-left">
                    <div class="nav-logo"><a data-scroll href="#top">DS<span>.</span></a></div>
                </div>
                <div class="col-xs-10 text-right">
                    <div>
                        <a href="#" data-placement="bottom" title="Menu" class="nav-menu" data-toggle="dropdown"><i
                                class="col-red bi bi-list" style="color: #45aaf2;"></i></a>
                        <div class="dropdown-menu">
                            <div class="arrow-up"></div>
                            <ul>
                                <li id="a-register">
                                    <a href="register.html">Register<i class="bi bi-pencil-square"></i></a>
                                </li>
                                <li id="a-login">
                                    <a href="login.html">Login<i class="bi bi-box-arrow-in-left"></i></a>
                                </li>
                                <li id="a-logout">
                                    <a>Logout<i class="bi bi-box-arrow-right"></i></a>
                                </li>
                                <li id="a-modify">
                                    <a href="modify.html">Modify Info<i class="bi bi-eraser-fill"></i></a>
                                </li>
                                <li id="a-write">
                                    <a>Write<i class="bi bi-pen-fill"></i></a>
                                </li>
                                <li id="a-space">
                                    <a>Space<i class="bi bi-person-circle"></i></a>
                                </li>
                                <li id="a-admin">
                                    <a href="admin.html" target="_blank">Admin<i class="bi bi-gear-wide"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ! /navigation -->

    <div class="showimg"></div>

    <div id="preview">
        <div class="preview-title text-center">
            <h1><a href="commend.html">Commend</a></h1>
        </div>
        <div class="preview-body"></div>
        <!-- <div id="pager" class="black2"></div> -->
    </div>


    <!-- ! add phone mail -->
    <section id="information">
        <!-- <div class="container"> -->
        <div class="row wow animate__animated animate__backInUp" data-wow-delay=".5s">
            <div class="info-bottom col-md-4 wow animate__animated animate__backInUp" data-wow-delay=".5s ">

                <p><i class="bi bi-geo-alt-fill" style="font-size: 2rem; color: rgb(255, 255, 255);"></i>&ensp;Hangzhou,
                    310000.</p>
            </div>
            <div class="info-bottom info-bottom-mid col-md-4 wow animate__animated animate__backInUp"
                data-wow-delay=".5s ">
                <p><i class="bi bi-telephone" style="font-size: 2rem; color: rgb(255, 255, 255);"></i>&ensp;+86
                    12345678911</p>
            </div>
            <div class="info-bottom col-md-4 wow animate__animated animate__backInUp" data-wow-delay=".5s">
                <p><i class="bi bi-envelope"
                        style="font-size: 2rem; color: rgb(255, 255, 255);"></i>&ensp;<a>lllllan@qq.com</a></p>
            </div>
        </div>
        <!-- </div> -->
    </section>


    <!-- ! footer copy -->
    <footer>
        <div class="container">
            <div class="row">

                <div class="col-sm-6 col-xs-12">
                    <p class="copyright wow animate__animated animate__lightSpeedInRight" data-wow-delay="1.5s">©
                        Copyright 2021. More informations <a href="history.html" title="更多信息">click here</a></p>
                    <!--  /.copyright  -->
                </div>

                <div class="col-sm-6 col-xs-12">
                    <p class="designed wow animate__animated animate__lightSpeedInLeft" data-wow-delay="1.5s">Designed
                        and Developed by lllllan</p>
                    <!--  /.designed  -->
                </div>

            </div>
            <!--  /.row  -->
        </div>
        <!--  /.container  -->
    </footer>
    <!-- ! /footer -->

    <!-- ^  jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery-3.6.0.min.js"></script>

    <!-- ^ bootstrap.js 3.4.1 -->
    <script src="js/bootstrap-3.4.1.min.js"></script>

    <!-- ^ smooth-scrool.js -->
    <script src="js/smooth-scroll.js"></script>

    <!-- ^ pagination.js -->
    <script type="text/javascript" src="js/jquery.pagination.js"></script>

    <!-- ^ 刷新回到页面顶部 -->
    <script type="text/javascript">
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>

    <!-- ^ 滚动到下方 -->
    <script type="text/javascript">
        function scroolDown() {
            if ($(window).scrollTop() <= $(window).height()) {
                console.log("ohhhhhhhhh");
                $('html, body').animate({
                    scrollTop: $("#preview").offset().top
                }, 2000);
            }
        }

        $(document).ready(function () {
            console.log("scroll");
            setTimeout(scroolDown, 2000);
        })
    </script>

    <!-- ^ 滚动效果  -->
    <script type="text/javascript">
        smoothScroll.init();

        function scroll() {
            // ! 计算位置判断是否为导航栏添加 ‘fiexd-top’ class
            if ($(window).scrollTop() >= $(window).height()) {
                $('#navigation ').addClass('fixed-top');
            } else {
                $('#navigation ').removeClass('fixed-top');
            }
        }

        function setHeaderHeight() {
            var windowHeight = $(window).height();
            $('#header').height(windowHeight);
        }

        // ! 监听窗口大小变化
        $(window).resize(function () {
            setHeaderHeight();
        })

        $(document).ready(function () {
            document.onscroll = scroll;
            setHeaderHeight();
        });
    </script>

    <!-- ^ markdown to html -->
    <script src="js/parser.js"></script>

    <!-- # basic.js -->
    <script type="text/javascript" src="js/basic.js"></script>

    <!-- # index.js -->
    <script type="text/javascript" src="js/index.js"></script>

    <!-- # js -->
    <script type="text/javascript" src=""></script>

</body>

</html>